<!--@Knockout-->
<div id="button" data-bind="dxButton:{ text:'Hover over me' }, event: { mouseover: toggleTooltip, mouseout: toggleTooltip } "></div>
<div data-bind="dxTooltip:{
    target: '#button',
    visible: tooltipVisible,
    contentTemplate: currentTemplate
}">
    <div data-options="dxTemplate:{ name: 'brief' }">
        <p>This is a button.</p>
    </div>
    <div data-options="dxTemplate:{ name: 'full' }">
        <p>This is a button.</p>
        <p><i>It is a target widget for the current tooltip.</i></p>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label" style="width:60%">contentTemplate</div>
        <div class="dx-field-value"  style="width:40%" data-bind="dxSelectBox: {
            items: ['brief', 'full'],
            value: currentTemplate
        }"></div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="height: 100%;">
    <div id="button" dx-button="{ text:'Hover over me' }" ng-mouseover="toggleTooltip()" ng-mouseout="toggleTooltip()"></div>
    <div dx-tooltip="{ 
        target: '#button',
        bindingOptions: {
            visible: 'tooltipVisible',
            contentTemplate: 'currentTemplate'
        }
    }">
        <div data-options="dxTemplate:{ name: 'brief' }">
            <p>This is a button.</p>
        </div>
        <div data-options="dxTemplate:{ name: 'full' }">
            <p>This is a button.</p>
            <p><i>It is a target widget for the current tooltip.</i></p>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label" style="width:60%">contentTemplate</div>
            <div class="dx-field-value" style="width:40%" ng-model="currentTemplate" dx-select-box="{
                items: ['brief', 'full']
            }"></div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div id="button"></div>
<div id="myTooltip"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label" style="width:60%">contentTemplate</div>
        <div class="dx-field-value"  style="width:40%" id="templateSelector"></div>
    </div>
</div>
<!--/@jQuery-->